<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            属性选择器可以根据元素具有的属性对于元素进行选择
            使用方法:
                E[attr]: 选择具有attr属性的E元素
                E[attr='val']: 选择具有attr属性且属性值等于val的E元素
                E[attr^='val']: 选择具有attr属性且属性值以val开头的E元素
                E[attr$='val']: 选择具有attr属性且属性值以val结尾的E元素
                E[attr*='val']: 选择具有attr属性且属性值中含有val的E元素
            这个例子就是有mikaisa-data这个属性的div 
            注意, 属性选择器其实是一个筛选作用, E不见得一定是元素标签名, 也可以是class和id

            注意: 属性选择器的权重是10,和类选择器是一样的,所以div[xxx=xxx]权重就是10+1=11
        */
        .dd[mikaisa-data]{
            color: yellow;
        }

        div[mikaisa-data='blue']{
            color: blue;
        }

        div[mikaisa-data^='s']{
            color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 1. 借助属性选择器,就可以不再局限于id和class了,属性可以是自定义属性 -->
    <div mikaisa-data="yellow" class="dd">我是黄色的</div>

    <!-- 2. 通过 属性=值 的方式选择元素 -->
    <div mikaisa-data="blue">我是蓝色的</div>

    <!-- 3. 通过属性以值开头的方式进行选择 -->
    <div mikaisa-data="skyblue">我是天蓝色的</div>
</body>
</html>